<template>
	<view class="body d-f d-c">
		<search></search>
		<scroll-view scroll-y class="box flex-1">
			<view class="hh100 d-b-c">
				<scroll-view class="left hh100" scroll-y style="width: 26%;">
					<view v-for="(item, index) in data.categoryList.children" :key="index" class="pt30 pb30 tc f28"
						:class="data.mindex == index ? 'active' : ''" @click="setAct(index)">{{ item.name }}</view>
				</scroll-view>
				<scroll-view class="rigth hh100 pl20 pr20" scroll-y v-if="0">
					<view class="item mb20" v-for="(item, index) in data.filtrate" :key="index">
						<image :src="item.img" mode="aspectFill" class="ww100"></image>
						<view class="fb tc p10 f36" v-if="item.name">{{ item.name }}</view>
					</view>
				</scroll-view>
				<scroll-view v-else class="rigth hh100" scroll-y="true" :scroll-with-animation="false"
					:enable-back-to-top="true" @scrolltolower="loadmore" style="width: 76%;">
					<view class="selects bg-white p20">
						<block v-if="data.filtrate.length > 0">
							<view class="item1 d-s-c mb20" v-for="(item, index) in data.filtrate" :key="index">
								<view class="n1 fb f28 mr20">{{ item.name }}</view>
								<scroll-view scroll-x class="scroll f24 d-s-c flex-1" style="width: 86%;">
									<view class="pl20 pr20 pt5 pb10"
										:class="data.filtrate_arr[index] == idx ? 'active' : ''"
										v-for="(im, idx) in item.val" :key="idx" @click="setAct1(index, idx)">{{
											im
										}}
									</view>
								</scroll-view>
							</view>
						</block>
					</view>
					<view class="pb20" v-if='data.pagination.data.length > 0'>
						<view class="list d-b-c f-w pl20 pr20">
							<view class="item mb20" v-for="(item, index) in data.pagination.data" :key="index"
								@click="store.commit('jump', `/pages/detail/detail?id=${item.id}`)">
								<image :src="item.image" mode="widthFix" class="ww100"></image>
								<view class="bg-white p10">
									<view class="name f26 vertical">{{ item.title }}</view>
								</view>
							</view>
						</view>
					</view>
					<up-empty marginTop="20vh" mode="list" v-else></up-empty>
				</scroll-view>

			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { reactive } from 'vue'
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { useStore } from "vuex"
const store = useStore()
const data = reactive({
	categoryList: [],
	pagination: {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	},
	loadStatus: '',

	category_id: 0,
	active: 0,
	mindex: 0,
	filtrate: [],
	filtrate_arr: [],
	search_arr: [],
})

function setAct(i) {
	data.mindex = i
	data.pagination = {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	};
	data.filtrate = [];
	data.filtrate_arr = [];
	data.search_arr = [];
	data.category_id = data.categoryList.children[i].id;
	getGoodsList(data.category_id)
	getFiltrate(data.category_id)
}

function setAct1(i, j) {
	data.filtrate_arr[i] = j
	data.search_arr = [];
	for (let i = 0; i < data.filtrate.length; i++) {
		data.search_arr.push(data.filtrate[i].id + ':' + data.filtrate[i].val[data.filtrate_arr[i]]);
	}
	data.pagination = {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	};
	getGoodsList(data.category_id)
}

async function getFiltrate(category_id) {
	const res = await store.dispatch('request', {
		url: store.state.api.filtrate,
		data: {
			category_id: category_id,
		}
	})
	if (res.code == 1) {
		data.filtrate = res.data;
		if (data.filtrate.length > 0) {
			for (let i = 0; i < data.filtrate.length; i++) {
				data.filtrate_arr.push(0);
			}
		}
	}
}

async function getList() {
	const res = await store.dispatch('request', {
		url: store.state.api.category.index,
		data: {
			id: 3,
		}
	})
	if (res.code == 1) {
		data.categoryList = res.data;
	}
}
async function getGoodsList(id, page = 1, list_rows = 14) {
	data.loadStatus = 'loading';
	const res = await store.dispatch('request', {
		url: store.state.api.goods.index,
		data: {
			category_id: id,
			list_rows,
			page,
			search_arr: data.search_arr,
		}
	})
	if (res.code == 1) {
		let couponList = data.pagination.data.concat(res.data.data);
		data.pagination = {
			...res.data,
			data: couponList,
		};

		if (data.pagination.current_page < data.pagination.last_page) {
			data.loadStatus = 'more';
		} else {
			data.loadStatus = 'noMore';
		}
	}

}
onLoad(async (options) => {
	await getList(options);
	if (data.categoryList.style === 'first_one' || data.categoryList.style === 'first_two') {
		if (uni.getStorageSync('is_home')) {
			uni.setStorageSync('is_home', 0)
			for (let i = 0; i < data.categoryList.children.length; i++) {
				if (data.categoryList.children[i].id == '5') {
					data.mindex = i;
					break;
				}
			}

		}
		getGoodsList(data.categoryList.children[data.mindex].id);
		data.category_id = data.categoryList.children[data.mindex].id;
		getFiltrate(data.categoryList.children[data.mindex].id);
		uni.$mpShare = {
			title: '全屋定制馆',
			path: '/pages/index/home',
			imageUrl: data.categoryList.children[data.mindex].image,
		};
	}
});

// 加载更多
function loadmore() {
	if (data.loadStatus !== 'noMore') {
		getGoodsList(
			data.category_id,
			data.pagination.current_page + 1,
		);
	}
}
onReachBottom(() => {
	console.log('loadmore');
	loadmore();
});
</script>

<style scoped lang="scss">
.body {
	height: 100vh;
}

.box {
	height: 1px;
}

.selects {
	.n1 {
		white-space: nowrap;
	}

	.scroll {
		white-space: nowrap;

		view {
			display: inline-block;
			border-radius: 20rpx;
		}

		.active {
			background-color: orange;
			color: #fff;
		}
	}
}

.left {
	border-right: 1px solid #eee;
	width: 250rpx;

	.active {
		background-color: orange;
		color: #fff;
	}
}

.rigth {
	// font-family: '楷体';

	.item {
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
		background-color: #fff;
		border-radius: 10rpx;

		image {
			height: 200rpx;
		}
	}

	.select {
		flex-direction: row-reverse;
	}

	.list {
		.item {
			border-radius: 5rpx;
			width: calc(50% - 10rpx);
		}
	}
}
</style>